<template>
	<view class="content">
		<lxc_nav text='' :bacicon="'#198BFA'" :background='bac'></lxc_nav>
		<view id="box">
			<view id="top" class="">
				<view class="top_le"></view>
				<view class="top_ri"></view>
			</view>
			<view id="content">
				<view class="title">
					<view>{{$t('all.i')}}</view>
				</view>
				<view class="inp">
					<text>{{$t('all.x99')}}</text>
					<input type="number" :placeholder="$t('all.e')" value="" />

				</view>
				<view class="inp" id="code_login">
					<text>{{$t('all.k')}}</text>
					<input type="password" :placeholder="$t('all.k')" value="" />
					<view id="code" @tap="code">{{text}}</view>
				</view>
				<view class="inp">
					<text>{{$t('all.f')}}</text>
					<input type="number" :placeholder="$t('all.g')" value="" />
					<input type="number" :placeholder="$t('all.q')" value="" />

				</view>
				<view class="inp">
					<text>{{$t('all.s')}}</text>
					<input type="number" :placeholder="$t('all.t')" value="" />

				</view>

				<view id="under">
					<view style="margin-left: 5vw; ">
						<u-checkbox-group>
							<u-checkbox v-model="checked" label-disabled="false" shape="circle">
								<text style="font-size: 24rpx;">{{$t('all.u')}}</text>
							</u-checkbox>
						</u-checkbox-group>
					</view>


					<view class="but">
						<button type="default">{{$t('all.a')}}</button>
					</view>
					<view class="fot">
						<text>已有帐号？</text>
						<text @tap="login_ok" style="text-decoration: underline;">去登陆</text>


					</view>

				</view>

			</view>


		</view>

	</view>
</template>

<script>
	import lxc_nav from '../../components/nav.vue'
	export default {
		components: {
			lxc_nav
		},
		data() {
			return {
				title: 'Hello',
				text: this.$t('all.l'),
				bac: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				checked: '',
			}
		},
		onLoad() {

		},
		methods: {
			code() {
				let _this = this
				if (_this.text == this.$t('all.l')) {
					var x;
					clearInterval(x);
					console.log(123456);
					let time = 60
					x = setInterval(() => {
						time--
						_this.text = `${time}从新获取`
						if (time < 5) {
							clearInterval(x);
							_this.text = this.$t('all.l')
						}
					}, 1000)
				}

			},
			// 登录
			login_ok() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	#box {
		position: relative;
		height: 1300rpx;
		overflow: hidden;
	}

	#content {}

	.title {
		position: absolute;
		top: 5vh;
		width: 100vw;
		text-align: center;
		font-size: 28rpx;

	}

	.title view:nth-child(1) {
		height: 54px;
		font-size: 56rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: $lxc_title;
		text-shadow: 0px 2px 24px rgba(58, 199, 118, 0.4);

	}

	.title view:nth-child(2) {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-top: 5vw;
	}

	#code_login {
		position: relative;
	}

	#code {
		width: 170rpx;
		height: 56rpx;
		background: linear-gradient(90deg, #1989FA, #19C2FA);
		box-shadow: 0px 2rpx 24rpx 0px rgba(25, 137, 250, 0.4);
		border-radius: 32rpx;
		line-height: 56rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28rpx;
		position: absolute;
		right: 6vw;
		top: 90rpx;
	}

	#top {
		width: 100vw;
		height: 40vh;
		position: relative;
	}

	.top_ri {
		width: 100vw;
		height: 100vw;
		background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
		opacity: 0.1;
		border-radius: 50%;
		position: absolute;
		right: -47vw;
		top: -37vw;
	}

	.top_le {
		width: 100vw;
		height: 100vw;
		background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
		opacity: 0.1;
		border-radius: 50%;
		position: absolute;
		left: -34vw;
		top: -54vw;
	}

	.inp {
		padding-left: 5vw;
		position: relative;
		top: -26vh;

	}

	.inp text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 5px;
	}

	input {
		width: 90vw;
		height: 96rpx;
		background: #FFFFFF;
		border: 1rpx solid #f4f4f4;
		box-shadow: 0px 2rpx 24rpx 0px rgba(0, 0, 0, 0.09);
		border-radius: 20rpx;
		margin-top: 10px;
		margin-bottom: 10px;
		text-indent: 20px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8E8E8E;
	}

	.but {
		margin-top: 20rpx;
	}

	.but button {
		width: 619rpx;
		height: 92rpx;
		background: linear-gradient(90deg, #1989FA, #19C2FA);
		box-shadow: 0px 2px 24px 0px rgba(25, 137, 250, 0.4);
		border-radius: 46px;
		color: #FFFFFF;
		font-size: 40rpx;
		line-height: 92rpx;
	}

	.fot {
		width: 100vw;
		height: 26px;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8E8E8E;
		margin-top: 24rpx;
	}

	#under {
		position: relative;
		top: -25vh;
	}
</style>
